<template>
	<div class="nav-power-user-home-panel">
		<div v-if="isYijingCloud && visitAcLength == 0" style="display: flex;flex-direction: column;" class="yijing-empty">
			<div class="image"></div>
			<span> {{$t("应用上线后，该菜单为开放访问")}}</span>
			<span class="spanSecond">{{$t("点击菜单访问权限中的添加权限限定可见范围")}}</span>
		</div>
		<div v-else>
		<div class="nav-power-user-toolbar" style="width: 100%;height:50px;">
			<el-link @click="changeLinkFlag" type="primary" underline="false" href="javascript:void(0);" v-show="showLinkFlag">{{$t("想检查指定人员是否可访问")}}?</el-link>
			<div v-show="!showLinkFlag">
				<!--<awsui-input placeholder="选择人员，检查是否可访问" v-model="filterPowerUserStr" @keyup.enter.native="filterUser">
					<template #suffix>
						<i class="awsui-iconfont">&#xe63b;</i>
					</template>
				</awsui-input>-->
				<awsui-address :propsOptions="propsOptions" v-model="filterPowerUser"></awsui-address>
			</div>
			<span style="display:inline-block;height:20px;line-height:20px;width:100%;margin-top:5px;" v-if="filterPowerUserStr==''">{{$t("当前可访问人员")}}&nbsp;{{powerUserCont}}&nbsp;{{$t("人")}}</span>
			<span style="display:inline-block;height:20px;line-height:20px;width:100%;margin-top:5px;" v-else-if="filterPowerUserStr!=''">{{$t("当前可访问人员")}}&nbsp;{{powerUserCont}}&nbsp;{{$t("人")}}，{{$t("无权限人员")}}&nbsp;{{unPowerUserCont}}&nbsp;{{$t("人")}}</span>
		</div>
		<!--骨架屏 -->
		<el-skeleton style="width: 100%;" rows="5" :loading="powerUserLoading && navPowerUserList.length == 0" animated class="poweruser-skeleton-panel">
			<template #template>

				<div class="poweruser-row-header">
					<el-row>
						<el-col :span="10">
							<el-skeleton-item variant="text" style="width:50px;height:23px;margin-top:8px;"/>
						</el-col>
						<el-col :span="14">
							<el-skeleton-item variant="text" style="width: 50px;height:23px;margin-top:8px;"/>
						</el-col>
					</el-row>
				</div>
				<div v-for="i in 5" :key="i" class="poweruser-each-row">
					<el-row>
						<el-col :span="10">
							<el-skeleton-item variant="text" style="width: 90%;height:23px;margin-top:8px;"/>
						</el-col>
						<el-col :span="14">
							<el-skeleton-item variant="text" style="width: 100%;;height:23px;margin-top:8px;"/>
						</el-col>
					</el-row>
				</div>
			</template>
		</el-skeleton>
		<!--骨架屏 -->

		<div class="nav-power-user-list-panel" v-show="!powerUserLoading">
			<div class="poweruser-row-header">
				<el-row>
					<el-col :span="10">{{$t("人员")}}</el-col>
					<el-col :span="14">{{$t("部门")}}</el-col>
				</el-row>
			</div>
			<div v-if="navPowerUserList.length > 0"
				 style="height:calc(100% - 40px);overflow-y:auto;"
				 v-infinite-scroll="loadNavPowerUser"
				 infinite-scroll-distance="10"
				 :infinite-scroll-disabled="scrollLoadingDisabled"
			>
				<div v-for="info in navPowerUserList" :key="info.id" class="poweruser-each-row">
					<el-row>
						<el-col :span="10">
							<el-tooltip class="item" effect="dark" :content="info.userName" placement="bottom" :show-after="500">
								<div class="name">
									<i class='awsui-iconfont' v-if="info.canVisit" style="color:#606266;font-size:12px;">&#xe639;</i>
									<i class='awsui-iconfont' v-else-if="!info.canVisit" style="color:#606266;font-size:12px;">&#xe6e3;</i>
									<div style="display:inline-block;padding-left:5px;"  v-html="info.userName"></div>
								</div>
							</el-tooltip>

						</el-col>
						<el-col :span="14">
							<el-tooltip class="item" effect="dark" :content="info.departmentPath" placement="bottom" :show-after="500">
								<div class="path"  v-html="info.departmentPath"></div>
							</el-tooltip>
						</el-col>
					</el-row>
				</div>
				<div v-if="navPowerUserList.length > 0" class="list-more-panel">
					<span v-if="!powerUserListEnd" @click="loadNavPowerUser" class="hasMore">{{$t("加载更多")}}</span>
					<span v-else class="noMore">{{$t("已加载全部")}}</span>
				</div>
			</div>
			<div v-if="navPowerUserList.length == 0" class="poweruser-nodata">
				{{$t("暂无数据")}}
			</div>

		</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "PowerUserInfo",
		props: {
			navId: {
				type: String
			},
			isYijingCloud: {
				type: Boolean
			},
			visitAcSize: {
				type: Number
			},
		},
		data() {
			let config = {
				filter: {
					addressType: "user",
					isAdvMode: true,
					addressSetting: {
						range: "department|position|role|team",
						delimiter: " ",
						choiceType: "multiple",
						leafType: "user"
					},
					sourceField: "UID",
					targetField: "address1_1",
					deptTargetField: ""
				},
				separator: " ",
				valueType: 0,
			};

			return {
				powerUserListSize: 100,
				powerUserListStart: 0,
				powerUserListEnd: true,
				navPowerUserList: [],
				skeletonTableData: [{
					userName: 'XXX',
					departmentPath: 'XXXXXXXXXXXXXXXXXXX'
				}, {
					userName: 'XXX',
					departmentPath: 'XXXXXXXXXXXXXXXXXXX'
				}, {
					userName: 'XXX',
					departmentPath: 'XXXXXXXXXXXXXXXXXXX'
				}, {
					userName: 'XXX',
					departmentPath: 'XXXXXXXXXXXXXXXXXXX'
				}, {
					userName: 'XXX',
					departmentPath: 'XXXXXXXXXXXXXXXXXXX'
				}],
				powerUserCont: 0,
				unPowerUserCont: 0,
				showLinkFlag: true,
				powerUserLoading: true,
				scrollLoadingDisabled: false,
				filterPowerUser: [],
				filterPowerUserStr: '',
				propsOptions: {
					data: {
						value: "",
						address: JSON.stringify(config),
						sid: settingParam.sessionId,
						appId: "abc.abc",
						addressDomId: "",
						formData: "",
						cmd: "CLIENT_AWSUI_ADDRESSBOOK",

					},
					width: "100%",
					title: "人员",
					height: 556,
					url: axiosBaseUrl + "w",
					type: "post",
					callback: (list) => {
						console.log("address callback");
						this.filterPowerUser = list;
						let allUser = "";
						list.forEach(function (each, i) {
							allUser += each.sourceId + ",";
						});
						this.filterPowerUserStr = allUser;
						this.filterUser();
					}
				},
				tableHeight: "100%",
				visitAcLength:this.visitAcSize,
			}
		},
		mounted() {
			console.log(this.navId);
			if (this.navId != undefined) {
				//this.loadNavPowerUser();//不知道为什么会重复触发调用loadNavPowerUser 导致数据重复显示，先注释掉，后续观察
			}

		},
		watch: {
			navId: {
				handler: function (val) {
					if (this.navId != undefined) {
						this.loadNavPowerUser();
					}
				}
			},
			filterPowerUser: {
				handler: function (val) {
					console.log(val);
				}
			}
		},
		methods: {
			changeLinkFlag() {
				this.showLinkFlag = false;
			},
			loadNavPowerUser() {
				let $this = this;
				let that = this;
				if (that.filterPowerUserStr == "" && that.powerUserListStart == 0) {
					//第一次加载的时候查询下总符合条件的数据
					that.loadNavPowerAllCount();
				}
				that.powerUserLoading = true;
				that.scrollLoadingDisabled = true;
				let data = {
					url: 'jd',
					data: {
						cmd: 'CONSOLE_P_NAV_POWER_USER_DATA',
						sid: settingParam.sessionId,
						type: "",
						id: that.navId,
						users: that.filterPowerUserStr,
						start:that.powerUserListStart,
						size:that.powerUserListSize,
					}
				};
				// 查询数据
				that.awsuiaxios.post(data).then(function (ro) {
					console.log(ro.data);
					let userList = ro.data.list;
					let powerUserCont = ro.data.powerUserCont;
					let unPowerUserCont = ro.data.unPowerUserCont;
					that.navPowerUserList = that.navPowerUserList.concat(userList);
					if (that.filterPowerUserStr != "") {
						that.powerUserCont = powerUserCont;
					}
					that.unPowerUserCont = unPowerUserCont;
					that.powerUserListEnd = ro.data.end;
					that.powerUserListStart = ro.data.start;
					that.powerUserLoading = false;
					that.scrollLoadingDisabled = that.powerUserListEnd;

					console.log("window.isYijingWechat:"+window.isYijingWechat);
					setTimeout(function () {
						if (window.isYijingWechat) {
							let querySelector = document.querySelectorAll('ww-open-data');
							if (self.frameElement && self.frameElement.tagName == "IFRAME") {
								top.window.WWOpenData.bindAll(querySelector);
							} else {
								window.WWOpenData.bindAll(querySelector);
							}
						}
					},300);
				}).catch(error => {
					console.log(error);
				});
			},
			loadNavPowerAllCount() {
				let $this = this;
				let that = this;
				let data = {
					url: 'jd',
					data: {
						cmd: 'CONSOLE_P_NAV_POWER_USER_DATA_COUNT',
						sid: settingParam.sessionId,
						type: "",
						id: that.navId,
						users: that.filterPowerUserStr,
					}
				};
				// 查询数据
				that.awsuiaxios.post(data).then(function (ro) {
					that.powerUserCont = ro.data.allCount;
				}).catch(error => {
					console.log(error);
				});
			},
			filterUser() {
				this.navPowerUserList = [];
				this.powerUserListEnd = true;
				this.powerUserListStart = 0;
				this.loadNavPowerUser();
			},
			tableRowClassName({row, rowIndex}) {
				if (!row.canVisit) {
					return 'warning-row';
				}
				return '';
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.nav-power-user-home-panel {
		float: left;
		width: 100%;
		text-align: left;
		overflow: hidden;
	}
	.nav-power-user-list-panel{
		display: inline-block;
		width: 100%;
		overflow: hidden;
		height: calc(100vh - 54px - 50px);
	}

	.nav-power-user-list-panel .awsui-iconfont {
		margin-left: 2px;
	}

	.poweruser-nodata {
		display: block;
		width: 100px !important;
		height: 100px !important;
		padding-top: 0px;
		background-size: 100px 100px !important;
		background-repeat: no-repeat !important;
		background: url('../../assets/no_content.png');
		color: #909399;
		box-sizing: content-box;
		margin-top: calc(50vh - 100px - 80px) !important;
		line-height: 250px !important;
		margin-left: 45%;
		text-align: center;
	}

	.list-more-panel{
		height: 30px;
		line-height: 30px;
		vertical-align: middle;
		text-align: center;
		width: 50%;
		margin: 5px auto;
	}

	.list-more-panel span {
		width: 100%;
		height: 30px;
		display: inline-block;
		border-radius: 30px;
		background: #f1f1f1;
	}

	.list-more-panel .hasMore:hover {
		cursor: pointer;
		background: #4E7FF9;
		color: #ffffff;
	}

	.poweruser-row-header {
		width: 100%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		font-size: 14px;
		font-weight: 700;
		border-bottom: 1px solid #e6e6e6;
	}

	.poweruser-each-row {
		height: 40px;
		line-height: 40px;
		border-bottom: 1px solid #e6e6e6;
	}

	.poweruser-each-row .name {
		padding: 0px 5px;
		height: 40px;
		line-height: 40px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 12px;
	}

	.poweruser-each-row .path {
		padding: 0px 5px;
		height: 40px;
		line-height: 40px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 12px;
	}

	.poweruser-each-row:hover {
		transition-delay: 100ms;
		background-color: #f5f7fa;
	}

	.yijing-empty{
		height: 400px !important;
		color: #3d5dd7;
		font-size: 14px;
		box-sizing: content-box;
 		line-height: 50px !important;
		text-align:center;
	}
	.yijing-empty .image{
	    margin-left:calc( 50% - 100px);
		width: 200px !important;
		height: 200px !important;
		background-size: 200px 200px !important;
		background-repeat: no-repeat !important;
		background: url('../../assets/yijing_no_content.png');
	}

	.yijing-empty .spanSecond{
		height: 20px;
		font-size: 12px;
		color: #666;
 	}
</style>
<style>
	.el-table .warning-row {
		color: red !important;
	}

	.nav-power-user-toolbar .awsui-address {
		margin: 0px !important;
	}

	/*el-table 行字体大小*/
	.el-table__row {
		font-size: 12px !important;
	}

	.el-table td, .el-table th {
		padding: 8px !important;
	}

	.poweruser-skeleton-panel .el-table .cell {
		height: 23px !important;
	}
</style>